switch: Animate transitions

Use a constraint align instead of :x-align to animate it. Match GTK
duration.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2717>

diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index bc98be2fc14a301bcab65b0fa93be1f98381feca..1b52197534f99fe6f985e9b25f182701591217ca 100644 (file)
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -375,13 +375,17 @@ export const Switch = GObject.registerClass({
         this._handle = new St.Widget({
             style_class: 'handle',
             y_align: Clutter.ActorAlign.CENTER,
-            x_align: Clutter.ActorAlign.START,
-            x_expand: true,
             constraints: new Clutter.BindConstraint({
                 source: this,
-                coordinate: Clutter.BindCoordinate.SIZE,
+                coordinate: Clutter.BindCoordinate.HEIGHT,
             }),
         });
+        this._handleAlignConstraint = new Clutter.AlignConstraint({
+            name: 'align',
+            align_axis: Clutter.AlignAxis.X_AXIS,
+            source: this,
+        });
+        this._handle.add_constraint(this._handleAlignConstraint);
         this.add_child(this._handle);
 
         this.state = state;
@@ -412,14 +416,24 @@ export const Switch = GObject.registerClass({
         if (this._state === state)
             return;
 
+        let handleAlignFactor;
+        // Calling get_theme_node() while unmapped is an error, avoid that
+        const duration = this._handle.mapped
+            ? this._handle.get_theme_node().get_transition_duration()
+            : 0;
+
         if (state) {
             this.add_style_pseudo_class('checked');
-            this._handle.x_align = Clutter.ActorAlign.END;
+            handleAlignFactor = 1.0;
         } else {
             this.remove_style_pseudo_class('checked');
-            this._handle.x_align = Clutter.ActorAlign.START;
+            handleAlignFactor = 0.0;
         }
 
+        this._handle.ease_property('@constraints.align.factor', handleAlignFactor, {
+            duration,
+        });
+
         this._state = state;
         this.notify('state');
     }